<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#20222A"
      text-color="rgba( 255, 252, 245)"
      active-text-color="#fff"
      unique-opened
      router
    >
      <template v-for="item in items">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu
                v-if="subItem.subs"
                :index="subItem.index"
                :key="subItem.index"
              >
                <template slot="title">{{ subItem.title }}</template>
                <el-menu-item
                  v-for="(threeItem, i) in subItem.subs"
                  :key="i"
                  :index="threeItem.index"
                  >{{ threeItem.title }}</el-menu-item
                >
              </el-submenu>
              <el-menu-item
                v-else
                :index="subItem.index"
                :key="subItem.index"
                >{{ subItem.title }}</el-menu-item
              >
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from "../common/bus";
import { getSysmenu } from "../../api/api";
export default {
  data() {
    return {
      collapse: false,
      menuItems: [],
      items: [
        {
          icon: "el-icon-menu",
          index: "dashboard",
          title: "系统首页",
        },

        // {
        //   icon: "el-icon-bank-card",
        //   index: "tabs",
        //   title: "消费管理",
        //   subs: [
        //     {
        //       index: "tree3",
        //       title: "消费列表",
        //     },
        //   ],
        // },
        {
          icon: "el-icon-s-goods",
          index: "3",
          title: "产品管理",
          subs: [
            {
              index: "producttype",
              title: "产品分类",
            },
            {
              index: "productlist",
              title: "产品列表",
            },
            {
              index: "countlist",
              title: "库存报表",
            },
            {
              index: "secKillPro",
              title: "秒杀产品",
            },
          ],
        },
        {
          icon: "el-icon-s-custom",
          index: "4",
          title: "用户管理",
          subs: [
            {
              index: "tree1",
              title: "顾客列表",
            },
            {
              index: "tree2",
              title: "会员列表",
            },
          ],
        },
        {
          icon: "el-icon-shopping-cart-full",
          index: "5",
          title: "套餐管理",
          subs: [
            {
              index: "combo",
              title: "套餐管理",
            },
            // {
            //   index: "5-2",
            //   title: "销售报表",
            // },
          ],
        },
        {
          icon: "el-icon-user-solid",
          index: "6",
          title: "员工管理",
          subs: [
            {
              index: "/staffsou",
              title: "员工列表",
            },
            // {
            //   index: "6-2",
            //   title: "员工销售报表",
            // },
          ],
        },
        // {
        //   icon: "el-icon-date",
        //   index: "7",
        //   title: "预约管理",
        // },
        // {
        //   icon: "el-icon-s-data",
        //   index: "count",
        //   title: "美容统计",
        // },
      ],
    };
  },
  methods: {
    getMenuData(menuName) {
      let menuData = [];
      getSysmenu().then(
        function (data) {
          let data1 = data.data.menuArr;
          data1.forEach((val, index) => {
            let i = 8;
            if (val.menuname == menuName) {
              let systemItem = {};
              systemItem.icon = "el-icon-setting";
              systemItem.idex = i;
              systemItem.title = val.menuname;
              systemItem.subs = [];
              data1.forEach((value) => {
                if (value.parentid == val.id) {
                  let systemSubs = {};
                  let menuurl = value.menuurl.split("/")[2];
                  systemSubs.index = menuurl;
                  systemSubs.title = value.menuname;
                  systemItem.subs.push(systemSubs);
                }
              });
              this.items.push(systemItem);
            }
            i++;
          });
        }.bind(this)
      );
    },
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    },
  },
  // created() {
  //   // 通过 Event Bus 进行组件间通信，来折叠侧边栏
  //   bus.$on("collapse", (msg) => {
  //     this.collapse = msg;
  //   });
  //   this.getMenuData("系统管理");
  // },
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
</style>
